<template>
    <div>
      <video-player class="vjs-custom-skin"
                    ref="videoPlayer"
                    :options="theOptions"
                    :title="title"></video-player>
    </div>
</template>
<script>
import "vue-video-player/src/custom-theme.css";

export default {
  props: {
    sources: Array,
    aspectRatio: {
      type: String,
      default: "16:9"
    },
    poster: {
      type: String,
      default: ""
    },
    title: String
  },
  created() {},
  mounted() {},
  data() {
    return {};
  },
  computed: {
    theOptions() {
      return {
        start: 0,
        playsinline: true,
        muted: false,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: this.sources,
        aspectRatio: this.aspectRatio,
        poster: this.poster
      };
    }
  },
  methods: {},
  components: {}
};
</script>
<style>
.vjs-poster {
  background-size: cover;
}
</style>
